<template>
  <n-layout style="min-height: 100vh">
    <n-layout has-sider>
      <n-layout-sider style="min-height: 100vh" width="15em" bordered>
        <n-menu
          accordion
          :options="siderOptions"
          v-model:value="$route.path"
        ></n-menu>
      </n-layout-sider>
      <n-layout>
        <n-layout-header bordered>
          <header>
            <h2>商城后台管理系统</h2>
            <n-dropdown @select="handleSelect" :options="adminOptions">
              <n-icon size="1.8em">
                <person-circle-outline />
              </n-icon>
            </n-dropdown>
          </header>
        </n-layout-header>
        <n-layout-content>
          <div class="main">
            <router-view :key="$route.path"></router-view>
          </div>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-layout>
</template>

<script lang="ts" setup>
import { Component, h, ref } from "vue";
import {
  NLayout,
  NLayoutHeader,
  NLayoutSider,
  NLayoutContent,
  NMenu,
  NIcon,
  NDropdown,
} from "naive-ui";
import {
  PersonOutline,
  BagHandleOutline,
  CartOutline,
  PersonCircleOutline,
  TerminalOutline,
} from "@vicons/ionicons5";
import { useRouter, RouterLink, RouterLinkProps } from "vue-router";

const router = useRouter();

const adminOptions = ref([{ label: "退出登录", key: "logout" }]);
interface handlefunc {
  [propName: string | number]: any;
}
const adminHandle: handlefunc = {
  logout() {
    localStorage.clear();
    router.push("/login");
  },
};
function handleSelect(key: string | number) {
  adminHandle[key]();
}

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

function createLinkByPath(path: string, label: string) {
  return () =>
    h(
      RouterLink,
      {
        to: {
          path,
        },
      } as RouterLinkProps,
      {
        default: () => label,
      }
    );
}

const siderOptions = ref([
  {
    label: "订单管理",
    key: "o",
    icon: renderIcon(CartOutline),
    children: [
      {
        type: "group",
        label: "订单信息管理",
        key: "/orders",
        children: [
          {
            label: createLinkByPath("/orders/list", "订单列表"),
            key: "/orders/list",
          },
          {
            label: createLinkByPath("/orders/create", "添加订单"),
            key: "/orders/create",
          },
        ],
      },
      {
        type: "group",
        label: "订单项管理",
        key: "/orderitems",
        children: [
          {
            label: createLinkByPath("/orderitems/list", "订单项列表"),
            key: "/orderitems/list",
          },
          {
            label: createLinkByPath("/orderitems/create", "添加订单项"),
            key: "/orderitems/create",
          },
        ],
      },
    ],
  },
  {
    label: "商品管理",
    key: "p",
    icon: renderIcon(BagHandleOutline),
    children: [
      {
        type: "group",
        label: "商品信息管理",
        key: "/products",
        children: [
          {
            label: createLinkByPath("/products/list", "商品列表"),
            key: "/products/list",
          },
          {
            label: createLinkByPath("/products/create", "添加商品"),
            key: "/products/create",
          },
        ],
      },
      {
        type: "group",
        label: "商品分类管理",
        key: "/categories",
        children: [
          {
            label: createLinkByPath("/categories/list", "商品分类列表"),
            key: "/categories/list",
          },
          {
            label: createLinkByPath("/categories/create", "添加商品分类"),
            key: "/categories/create",
          },
        ],
      },
    ],
  },
  {
    label: "用户管理",
    key: "u",
    icon: renderIcon(PersonOutline),
    children: [
      {
        type: "group",
        label: "用户信息管理",
        key: "/users",
        children: [
          {
            label: createLinkByPath("/users/list", "用户列表"),
            key: "/users/list",
          },
          {
            label: createLinkByPath("/users/create", "添加用户"),
            key: "/users/create",
          },
        ],
      },
    ],
  },
  {
    label: "管理员管理",
    key: "a",
    icon: renderIcon(TerminalOutline),
    children: [
      {
        label: createLinkByPath("/adminusers/list", "管理员列表"),
        key: "/adminusers/list",
      },
      {
        label: createLinkByPath("/adminusers/create", "添加管理员"),
        key: "/adminusers/create",
      },
    ],
  },
]);
</script>

<style scoped lang="less">
header {
  padding: 0 2em;
  display: flex;
  align-items: center;

  h2 {
    flex: 1;
  }
}

.main {
  padding: 3em;
}
</style>
